<script setup>
import {
  delCommodityCategory,
  editCommodityCategory,
  getCommodityCategoryList
} from "@/api/httpApi/commodityCategoryApi.js";
import {onMounted, ref} from 'vue'
import {successCode} from "@/api/httpApi/base/http.js";
import {constantStore} from "@/stores/constantStore.js";
import MyTable from "@/components/constant/myTable.vue";
import {checkCaptchaCode} from "@/api/httpApi/userApi.js";
import {getProjectList} from "@/api/httpApi/projectApi.js";
import MySelect from "@/components/constant/mySelect.vue";

onMounted(() => {
  initProject();
  initCommodityCategory();
})


let commodityCategoryList = ref([]);
let commodityCategorySelectItem = ref([]);

let projectList = ref([]);
let projectSelectItem = ref([]);

//初始化分类列表
function initProject() {
  getProjectList().then(res => {
    if (res.code === successCode) {
      projectList.value = res.data;
      for (let i = 0; i < projectList.value.length; i++) {
        let item = projectList.value[i];
        projectSelectItem.value.push(
            {
              label: item.name,
              value: item.id
            })
      }
    }
  })
}

const projectId = ref("");

function initCommodityCategory() {
  console.log(projectId.value)
  getCommodityCategoryList(projectId.value).then(res => {
    commodityCategoryList.value = [];
    if (res.code === successCode) {
      commodityCategoryList.value = res.data;
      for (let i = 0; i < commodityCategoryList.value.length; i++) {
        let item = commodityCategoryList.value[i];
        commodityCategorySelectItem.value.push(
            {
              label: item.name,
              value: item.id
            })
      }
    }
  });
}

let commodityCategoryMapping = [
  {
    label: "ID",
    prop: "id",
    propConfig: {
      align: "center",
      width: "180",
      type: "text",
    },
  },
  {
    label: "分类名称",//表头名称 必填
    prop: "name",//数据对应字段 必填
    propConfig: {
      align: "center",//对齐方式 非必填 不写默认左对齐
      width: "100",//宽度 非必填 不写默认撑开
      type: "text",// 非必填 不写默认text   text(文本) selectText(根据给定列表，选择内容)  tag(标签)  Switch(开关)  image(图片)
      fixed: 'left',//固定列的位置
    },
    editHandle: "add_update",//出现在编辑中的操作 必填  添加有  修改有，
    editTypeConfig: {
      editProp: "name",// 编辑框的数据字段名称  非必填 不写默认用prop
      labelWidth: "100",
      required: true,//是否必传，默认false
      editType: "text", //编辑框类型，非必填 默认text 文本类型  支持图片类型（image） 选择框（select），
      editTextType: "text",
      rules: []//构建默认的校验规则
    }
  },
  {
    label: "描 述",
    prop: "description",
    propConfig: {
      align: "center",
      width: "180",
      type: "text",
    },
    editHandle: "add_update",//出现在编辑中的操作 必填  添加有  修改有，
    editTypeConfig: {
      labelWidth: "100",
      editType: "text", //编辑框类型，非必填 默认text 文本类型  支持图片类型（image） 选择框（select），
      editTextType: "text"
    }
  },
  {
    label: "商城名称",
    prop: "projectName",
    propConfig: {
      align: "center",
      width: "100",
      type: "text"
    },
    editHandle: "add_update",//出现在编辑中的操作 必填  添加有  修改有，
    editTypeConfig: {
      editProp: "projectId",// 编辑框的数据字段名称  非必填 不写默认用prop
      labelWidth: "100",
      editType: "select", //编辑框类型，非必填 默认text 文本类型  支持图片类型（image） 选择框（select），
      required: true,//是否必传，默认false
      option: projectSelectItem.value //选择框内数据
    }
  },
  {
    label: "顺序",
    prop: "orderIndex",
    propConfig: {
      align: "center",
      width: "100",
      type: "text"
    },
    editHandle: "add_update",//出现在编辑中的操作 必填  添加有  修改有，
    editTypeConfig: {
      labelWidth: "100",
      editType: "text", //编辑框类型，非必填 默认text 文本类型  支持图片类型（image） 选择框（select），
      editTextType: "number"
    }
  },
  {
    label: "父级分类",
    prop: "parentName",
    propConfig: {
      align: "center",
      width: "120",
      type: "text",
    },
    editHandle: "add_update",//出现在编辑中的操作 必填  添加有  修改有，
    editTypeConfig: {
      labelWidth: "100",
      editType: "select", //编辑框类型，非必填 默认text 文本类型  支持图片类型（image） 选择框（select），
      editProp: "parentId",// 编辑框的数据字段名称  非必填 不写默认用prop
      option: commodityCategorySelectItem.value,//选择框选项
    }
  },
  {
    label: "分类图片",
    prop: "image",
    propConfig: {
      align: "center",
      width: "100",
      type: "image",
    },
    editHandle: "add_update",//出现在编辑中的操作 必填  添加有  修改有，
    editTypeConfig: {
      labelWidth: "100",
      editType: "image", //编辑框类型，非必填 默认text 文本类型  支持图片类型（image） 选择框（select），
      imageConfig: {
        shape: "square", // square circle
        radius: 0,
        size: "",//单位PX 有size配置，  width 和height 将会失效 且 shape等于circle，仅仅会生效此属性
        width: 300,//单位PX
        height: 200,//单位PX
        fit: "cover", //图片如何适应到容器框，同原生 object-fit。  'fill', 'contain', 'cover', 'none', 'scale-down',
        lazy: true,
        alt: "热门图标",
      },
      cropperConfig: {
        canScale: true,//图片是否允许滚轮缩放 默认true
        autoCrop: true,//是否默认生成截图框 默认false
        fixed: false,//是否开启截图框宽高固定比例 默认false
        fixedNumber: [1, 1],//截图框的宽高比例, 开启fixed生效 默认[1, 1]  ([ 宽度 , 高度 ])
        full: false,//是否输出原图比例的截图, 默认false
        canMove: true,//上传图片是否可以移动, 默认true
        canMoveBox: false,//截图框能否拖动, 默认true
        original: false,//上传图片按照原始比例渲染, 默认false
        centerBox: false,//截图框是否被限制在图片里面 默认false
        high: true,//是否按照设备的dpr输出等比例图片 默认true
        infoTrue: false,//true 为展示真实输出图片宽高 默认false 展示看到的截图框宽高
        fixedBox: true,//固定截图框大小, 不允许改变 默认false false
      },
    }
  },
  {
    label: "热门图标",
    prop: "iconImage",
    propConfig: {
      align: "center",
      width: "100",
      type: "image",
    },
    editHandle: "add_update",//出现在编辑中的操作 必填  添加有  修改有，
    editTypeConfig: {
      labelWidth: "100",
      editType: "image", //编辑框类型，非必填 默认text 文本类型  支持图片类型（image） 选择框（select），
      imageConfig: {
        shape: "square", // square circle
        size: 80,
        alt: "热门图标",
      },
      cropperConfig: {canMoveBox: false},
    }
  },
  {
    label: "每组数量",
    prop: "groupNumber",
    propConfig: {
      align: "center",
      width: "90",
      type: "text",
    },
    editHandle: "add_update",//出现在编辑中的操作 必填  添加有  修改有，
    editTypeConfig: {
      labelWidth: "100",
      editType: "text", //编辑框类型，非必填 默认text 文本类型  支持图片类型（image） 选择框（select），
    }
  },
  {
    label: "单位",
    prop: "unit",
    propConfig: {
      align: "center",
      width: "120",
      type: "text"
    },
    editHandle: "add_update",//出现在编辑中的操作 必填  添加有，
    editTypeConfig: {
      editType: "text", //编辑框类型，非必填 默认text 文本类型  支持图片类型（image） 选择框（select），
      editTextType: "text",
    },
  },
  {
    label: "代码前缀",
    prop: "codePrefix",
    propConfig: {
      align: "center",
      width: "120",
      type: "text"
    },
    editHandle: "add_update",//出现在编辑中的操作 必填  添加有，
    editTypeConfig: {
      editType: "text", //编辑框类型，非必填 默认text 文本类型  支持图片类型（image） 选择框（select），
      editTextType: "text",
    },
  },
  {
    label: "有无蓝图",
    prop: "hasPic",
    propConfig: {
      align: "center",
      width: "90",
      type: "switch",
      modelAction: (val) => {  //选择按钮的切换函数
        return checkCaptchaCode(val)
      },
    },
    editHandle: "add_update",//出现在编辑中的操作 必填  添加有，
    editTypeConfig: {
      labelWidth: "100",
      editType: "select", //编辑框类型，非必填 默认text 文本类型  支持图片类型（image） 选择框（select），
      option: constantStore().stateOption,//选择框选项
    }
  },
  {
    label: "有无质量",
    prop: "hasMultiplier",
    propConfig: {
      align: "center",
      width: "90",
      type: "switch",
      modelAction: (val) => {  //选择按钮的切换函数
        return checkCaptchaCode(val)
      },
    },
    editHandle: "add_update",//出现在编辑中的操作 必填  添加有，
    editTypeConfig: {
      labelWidth: "100",
      editType: "select", //编辑框类型，非必填 默认text 文本类型  支持图片类型（image） 选择框（select），
      option: constantStore().stateOption,//选择框选项
    }
  },
  {
    label: "是否展示",
    prop: "show",
    propConfig: {
      align: "center",
      width: "90",
      type: "switch",
      modelAction: (val) => {  //选择按钮的切换函数
        return checkCaptchaCode(val)
      },
    },
    editHandle: "add_update",//出现在编辑中的操作 必填  添加有，
    editTypeConfig: {
      labelWidth: "100",
      editType: "select", //编辑框类型，非必填 默认text 文本类型  支持图片类型（image） 选择框（select），
      option: constantStore().stateOption,//选择框选项
    },
  },
  // {
  //   label: "是否打开",
  //   prop: "open",
  //   propConfig: {
  //     align: "center",
  //     width: "90",
  //     type: "switch",
  //     modelAction: (val) => {  //选择按钮的切换函数
  //       return checkCaptchaCode(val)
  //     },
  //   },
  //   editHandle: "add_update",//出现在编辑中的操作 必填  添加有，
  //   editTypeConfig: {
  //     editType: "select", //编辑框类型，非必填 默认text 文本类型  支持图片类型（image） 选择框（select），
  //     labelWidth: "100",
  //     option: constantStore().stateOption,//选择框选项
  //   },
  // },
  {
    label: "创建时间",
    prop: "createTime",
    propConfig: {
      align: "center",
      width: "180",
      type: "text",
    },
  },
  {
    label: "最近修改时间",
    prop: "updateTime",
    propConfig: {
      align: "center",
      width: "180",
      type: "text",
    },
  },
  {
    label: "状 态",
    prop: "delete",
    propConfig: {
      align: "center",
      width: "90",
      type: "tag",
      stateMapping: constantStore().stateMapping
    },
  },
  {
    label: "备 注",
    prop: "remarks",
    propConfig: {
      align: "center",
      width: "180",
      type: "text",
    },
    editHandle: "add_update",//出现在编辑中的操作 必填  添加有  修改有，
    editTypeConfig: {
      editType: "text", //编辑框类型，非必填 默认text 文本类型  支持图片类型（image） 选择框（select），
      editTextType: "text",
      require: true,
      labelWidth: "100"
    },
  },
]

let commodityCategory = ref({
  "id": "",
  "name": "",
  "remarks": "",
  "description": "",
  "orderIndex": 0,
  "createTime": "",
  "updateTime": "",
  "projectId": "",
  "parentId": "",
  "image": "",
  "iconImage": "",
  "groupNumber": 0,
  "levelTop": 0,
  "hasPic": "",
  "delete": "",
  "show": "",
  "open": ""
})
</script>

<template>
  <div class="commodity-category">
    <my-table :data-list="commodityCategoryList"
              @after-edit="initCommodityCategory()"
              :editAction="(editCommodity) => { return editCommodityCategory(editCommodity)}"
              :delAction="(ids) => { return delCommodityCategory(ids)}"
              title="商品"
              :mapping="commodityCategoryMapping"
              :edit-object="commodityCategory">
      <template #buttonAdd>
        <my-select v-model="projectId" placeholder="请选择商城" :option="projectSelectItem" @change-value="initCommodityCategory"/>
      </template>
    </my-table>

  </div>
</template>

<style scoped lang="scss">
.commodity-category {
  user-select: none;
}
</style>
